<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vivo iQOO Z9 - 京东</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <!-- 顶部导航栏（与首页相同） -->
    <div class="navigation-bar">
        <!-- 复制首页的导航代码 -->
    </div>

    <!-- 商品详情主体 -->
    <div class="product-detail-container">
        <div class="breadcrumb">
            <a href="#">手机通讯</a> > 
            <a href="#">手机</a> > 
            <a href="#">vivo</a> > 
            <span>vivo iQOO Z9</span>
        </div>

        <div class="product-main">
            <!-- 左侧商品图片 -->
            <div class="product-gallery">
                <div class="main-image">
                    <img src="./img/product-detailed/p1-large.jpg" alt="vivo iQOO Z9 主图">
                </div>
                <div class="thumbnail-list"><a href="login.html">登录查看更多图片 ></a>
                </div>
            </div>

            <!-- 右侧商品信息 -->
            <div class="product-info">
                <h1 class="product-title">vivo iQOO Z9【国家补贴】8GB+256GB 星芒白 6000mAh 超薄蓝海电池 第三代骁龙7 电竞手机</h1>
                <div class="price-section">
                    <span class="price-label">京东价</span>
                    <span class="price">
                        <i>￥</i>
                        <span class="b-price">1599.</span>
                        <span class="price-a">99</span>
                    </span>
                    <span class="promo-tag">国家补贴</span>
                </div>

                <div class="delivery-info">
                    <span>配送至</span>
                    <select class="region-select">
                        <option>北京市朝阳区</option>
                        <option>上海市浦东新区</option>
                        <!-- 其他地区选项 -->
                    </select>
                    <span class="stock-status">有货</span>
                </div>

                <div class="seller-info">
                    <span>商家：</span>
                    <span class="seller-name">vivo官方旗舰店</span>
                    <span class="seller-tag">官方自营</span>
                </div>

                <div class="action-buttons">
                    <button class="add-to-cart">加入购物车</button>
                    <button class="buy-now">立即购买</button>
                </div>

                <div class="service-info">
                    <div class="service-item">
                        <span class="icon">✓</span>
                        <span>极速审核</span>
                    </div>
                    <div class="service-item">
                        <span class="icon">✓</span>
                        <span>正品保证</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 商品详情选项卡 -->
        <div class="product-tabs">
            <div class="tab-header">
                <div class="tab active">商品详情</div>
                <div class="tab">规格参数</div>
                <div class="tab">包装清单</div>
                <div class="tab">售后保障</div>
            </div>
            <div class="tab-content">
                <!-- 这里放置商品详情内容 -->
                <img src="./img/products/p1-detail.jpg" alt="商品详情图">
            </div>
        </div>
    </div>

    <!-- 底部（与首页相同） -->
    <div class="footer">
        <!-- 复制首页的底部代码 -->
    </div>
</body>
<style>
    /* 商品详情页样式 */
.product-detail-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 15px;
    background: #fff;
}

.breadcrumb {
    padding: 15px 0;
    color: #666;
    font-size: 12px;
}

.breadcrumb a {
    color: #666;
    text-decoration: none;
}

.breadcrumb a:hover {
    color: #e4393c;
}

.product-main {
    display: flex;
    margin-top: 20px;
}

.product-gallery {
    width: 450px;
}

.main-image {
    width: 100%;
    height: 450px;
    border: 1px solid #eee;
    margin-bottom: 10px;
}

.main-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.thumbnail-list {
    display: flex;
    gap: 10px;
}
.thumbnail-list a{
    text-decoration: none;
}
.product-info {
    flex: 1;
    padding-left: 30px;
}

.product-title {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}

.price-section {
    background: #f5f5f5;
    padding: 15px;
    margin-bottom: 20px;
}

.price-label {
    font-size: 14px;
    color: #666;
}

.price {
    color: #e4393c;
    font-size: 24px;
    margin: 0 10px;
}

.promo-tag {
    background: #e4393c;
    color: white;
    padding: 2px 5px;
    font-size: 12px;
    border-radius: 2px;
}

.delivery-info {
    margin-bottom: 20px;
    font-size: 14px;
}

.region-select {
    margin: 0 10px;
    padding: 3px;
    border: 1px solid #ddd;
}

.stock-status {
    color: #e4393c;
}

.seller-info {
    margin-bottom: 20px;
    font-size: 14px;
}

.seller-name {
    color: #e4393c;
    margin: 0 5px;
}

.seller-tag {
    background: #f5f5f5;
    color: #666;
    padding: 2px 5px;
    font-size: 12px;
    border-radius: 2px;
}

.action-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}

.add-to-cart, .buy-now {
    height: 40px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 2px;
    cursor: pointer;
}

.add-to-cart {
    width: 160px;
    background: #ffeded;
    color: #e4393c;
    border: 1px solid #e4393c;
}

.buy-now {
    width: 160px;
    background: #e4393c;
    color: white;
    border: 1px solid #e4393c;
}

.service-info {
    display: flex;
    gap: 20px;
    font-size: 12px;
    color: #666;
}

.service-item .icon {
    color: #e4393c;
    margin-right: 5px;
}

/* 选项卡样式 */
.product-tabs {
    margin-top: 40px;
}

.tab-header {
    display: flex;
    border-bottom: 2px solid #e4393c;
}

.tab {
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
}

.tab.active {
    background: #e4393c;
    color: white;
}

.tab-content {
    padding: 20px 0;
    min-height: 500px;
}
</style>
<script>
    // 缩略图点击切换主图
document.querySelectorAll('.thumbnail-list img').forEach(thumb => {
    thumb.addEventListener('click', function() {
        const mainImg = document.querySelector('.main-image img');
        mainImg.src = this.src.replace('-thumb', '-large');
    });
});

// 选项卡切换
document.querySelectorAll('.tab').forEach(tab => {
    tab.addEventListener('click', function() {
        // 移除所有active类
        document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
        // 给当前点击的添加active
        this.classList.add('active');
        // 这里可以添加加载不同内容的逻辑
    });
});

// 加入购物车功能
document.querySelector('.add-to-cart').addEventListener('click', function() {
    alert('商品已加入购物车');
});

// 立即购买功能
document.querySelector('.buy-now').addEventListener('click', function() {
    window.location.href = 'checkout.html';
});
</script>
</html>